自定義組件

const Btn = () => {
    return <button>click me!</button>
};

function App() {
    return (
        <>
            <Btn />
            <Btn />
        </>
    );
}
export default App;

小說明：

• 自定義組件：Btn 是一個簡單的函數組件，返回一個按鈕。這樣的組件可以在 App 中重複使用。

• JSX 語法：你可以用 或 來渲染這個組件，兩者在 React 中效果相同。

• 封裝的優點：組件化的方式可以讓你簡化 UI 的重複部分，比如按鈕、表單等，讓代碼更具可維護性。

• 注意：組件名稱必須以大寫開頭，這是 React 區分原生 HTML 元素與自定義組件的機制。

自定義hook

步驟
1.聲名一個use開頭的函數
2.在函數內封裝可復用的邏輯
3.把組件中用到的狀態給return出去

import React, { useState } from 'react';

function useToggle() {
    const [hook, setHook] = useState(false);

    const toggle = () => {
        setHook(!hook);
    };

    return {
        hook, // 狀態
        toggle // 回調函數
    };
}
function App() {
    const { hook, toggle } = useToggle();

    return (
        <>
            {hook && <div>hook hook</div>}
            <button onClick={toggle}>toggle</button>
        </>
    );
}
export default App;

• 我們設定了一個自定義的useToggle Hook，封裝了常見的狀態切換邏輯。它返回一個 hook 狀態值和一個 toggle 回調函數，用來切換這個值。這樣便可在任何組件中重複使用。

• 在 App 組件中，我們通過 useToggle 來管理狀態。這裡的 hook 狀態決定 <div> 是否渲染，而按下按鈕時觸發的 toggle 函數用來切換狀態。

• 每次按下按鈕，hook 值就會從 true 切換為 false，反之亦然。

結論

自定義 Hook 可以將狀態管理邏輯抽離出來，方便在多個組件中重用。這樣，你只需編寫一次邏輯即可在不同的組件中使用，減少重複代碼，提高可維護性。

與普通的函數不同，自定義 Hook 是基於 React 的 Hooks 系統進行的封裝，讓它能夠更好地與 React 的狀態管理機制結合。

基本的React用法就到這囉，今天結束了謝謝